<template>
  <div class="body-box">
    <window-title title="条件筛选"></window-title>
    <el-form size="mini" :inline="true" label-position="left" style="margin-top:10px;">
      <el-row>
        <el-col :span="8">
          <el-form-item label="组别：" label-width="55px">
            <el-select v-model="group_id">
              <el-option
                v-for="(item,key) in team_list"
                :key="key"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单号：" label-width="55px">
            <el-input placeholder="请输入订单号查询" v-model="out_trade_no"></el-input>
          </el-form-item>
        </el-col>
        <el-form-item>
          <el-button icon="el-icon-search" class="com-btn" @click="search()">查询</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <window-title title="订单列表"></window-title>
    <el-tabs v-model="activeName">
      <el-tab-pane name="0">
        <span slot="label">
          全部
          <span class="tab-badge">{{all}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="1">
        <span slot="label">
          待付款
          <span class="tab-badge">{{pay}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label">
          待审核
          <span class="tab-badge">{{no_verify}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="3">
        <span slot="label">
          报名成功
          <span class="tab-badge">{{success_order}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="4">
        <span slot="label">
          已拒绝
          <span class="tab-badge">{{refuse_verify}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="5">
        <span slot="label">
          已退款
          <span class="tab-badge">{{return_order}}</span>
        </span>
      </el-tab-pane>
    </el-tabs>

    <el-table
      :header-cell-style="{background:'#f8f8f8',color:'#333',borderRight:0}"
      size="mini"
      border
      :data="list.data"
    >
      <el-table-column type="index" width="60px" label="序号"></el-table-column>
      <el-table-column label="单号" min-width="150px">
        <template slot-scope="item">
          <div>{{item.row.out_trade_no}}</div>
          <img
            src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/order/order_h5.png"
            v-if="item.row.source == 2"
            style="height:15px;margin-right:5px"
          />
          <!-- <img
            src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/order/order_ser.png"
            v-if="item.row.service_id.length > 0"
            style="height:15px;margin-right:5px"
          />-->
          <img
            src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/order/order_wechat.png"
            v-if="item.row.source == 1"
            style="height:15px;margin-right:5px"
          />
          <img
            src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/order/team_sign.png"
            v-if="item.row.source == 3"
            style="height:15px;margin-right:5px"
          />
        </template>
      </el-table-column>
      <el-table-column label="昵称" prop="user_info.MemberName" width="60px"></el-table-column>
      <el-table-column label="手机号" prop="user_info.Phone" width="100px"></el-table-column>
      <el-table-column label="组别" width="120px">
        <template slot-scope="item">
          <el-tag type="danger" size="mini">{{item.row.team_name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="费用" prop="total_price" width="60px"></el-table-column>
      <el-table-column label="时间" prop="create_time" width="150px"></el-table-column>
      <el-table-column label="状态" width="70px">
        <template slot-scope="item">
          <el-tag size="mini" type="danger" v-if="item.row.state == 1">待支付</el-tag>
          <div v-if="item.row.verify == 0 && item.row.state != 1">
            <el-tag type="primary" size="mini">待审核</el-tag>
          </div>
          <div v-if="item.row.verify == 1 && item.row.state != 1">
            <el-tag size="mini" type="warning" v-if="item.row.state == 3">已退款</el-tag>
            <template v-if="item.row.state == 2">
              <el-tag size="mini" type="success">正常</el-tag>
            </template>
            <el-tag size="mini" type="info" v-if="item.row.state == 4">已取消</el-tag>
          </div>
          <div v-if="item.row.verify == 2 && item.row.state != 1">
            <el-tag type="danger" size="mini">已拒绝</el-tag>
            <div>
              <el-tag size="mini" type="warning">已退款</el-tag>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100px">
        <template slot-scope="item">
          <el-button size="mini" style="margin-right:10px" @click="orderDetail(item.row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        background
        small
        :current-page="list.current_page"
        :page-size="list.per_page"
        layout="total, prev, pager, next, jumper"
        :total="list.total"
      ></el-pagination>
    </div>
    <!-- 订单详情 -->
    <el-dialog :visible.sync="order_model" width="800px" title="订单详情" :append-to-body="true">
      <order-detail :order_id="order_id"></order-detail>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";
import orderDetail from "./order-detail.vue";

export default {
  components: { windowTitle, orderDetail },
  props: { active_id: {}, type: {} },
  data() {
    return {
      activeName: "0",
      list: {
        current_page: 1,
        per_page: 10,
        total: 20,
        data: [
          {
            out_trade_no: 4323556,
            user_info: {
              MemberName: "是否",
              Phone: 1662055141
            },
            team_name: "女子组",
            total_price: "20.00",
            create_time: "2020-12-16",
            state: 1,
            source: 2
          },
          {
            out_trade_no: 4323556,
            MemberName: "是否",
            Phone: 1662055141,
            team_name: "女子组",
            total_price: "20.00",
            source: 1,
            create_time: "2020-12-16",
            state: 1
          }
        ]
      },
      team_list: [
        { name: "全部", id: "1" },
        { name: "男子组", id: "2" },
        { name: "女子组", id: "3" }
      ],
      load: true,
      all: 0,
      no_verify: 0,
      pay: 0,
      success_order: 0,
      refuse_verify: 0,
      return_order: 0,
      order_id_arr: [],
      order_model: false,
      order_id: 0,
      group_id: "全部",
      out_trade_no: "",
      now_time: Date.parse(new Date())
    };
  },
  mounted() {
    // this.getData();
    // this.getTeamInfo();
  },
  methods: {
    //搜索
    search() {
      this.list.current_page = 1;
      this.getData();
    },
    //获取活动组别信息
    // getTeamInfo(){
    //   this.ajaxs('active/getTeamInfo',{
    //     data:{active_id : this.active_id},
    //     success:(res) => {
    //       this.team_list = res.msg;
    //       this.team_list.unshift({name : '全部' , 'id' : 0});
    //     }
    //   });
    // },
    //订单详情
    orderDetail(id) {
      this.order_model = true;
      this.order_id = id;
    }
    //批量操作
    // totalSet(param){
    //   param == 1 ? this.agree(this.order_id_arr) : this.refuse(this.order_id_arr);
    // },
    // //批量选择
    // handleSelectionChange(e){
    //   this.order_id_arr = [];
    //   for(var i in e) {
    //     this.order_id_arr.push(e[i].id);
    //   }
    // },
    // //判断表格单行是否可以被选中
    // setIsSelect(row, index) {
    //   if (this.list.data[index].verify != 0 || this.list.data[index].state != 2) return false;
    //   return true;
    // },
    // //订单操作
    // tableSet(e,id) {
    //   if(e == 1) this.agree(id);
    //   if(e == 2) this.refuse(id);
    //   if(e == 3) this.orderReturn(id);
    // },
    // //订单退款
    // orderReturn(id){
    //   this.$confirm("确定标记退款?退款后付款金额会原路返回", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(() => {
    //       this.ajaxs("active/orderReturn", {
    //         data: { id: id },
    //         success: res => {
    //           this.toast(res.code, res.msg);
    //           if (res.code) {
    //             this.getData();
    //           }
    //         }
    //       });
    //     })
    //     .catch(() => {});
    // },
    // //订单同意
    // agree(id) {
    //   this.$confirm("确定同意审核?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(() => {
    //       this.ajaxs("active/agreeOrderVerify", {
    //         data: { id: id },
    //         success: res => {
    //           this.toast(res.code, res.msg);
    //           if (res.code) {
    //             this.getData();
    //           }
    //         }
    //       });
    //     })
    //     .catch(() => {});
    // },
    // //拒绝订单
    // refuse(id) {
    //   this.$confirm("确定拒绝审核?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(() => {
    //       this.ajaxs("active/refuseOrderVerify", {
    //         data: { id: id },
    //         success: res => {
    //           this.toast(res.code, res.msg);
    //           if (res.code) {
    //             this.getData();
    //           }
    //         }
    //       });
    //     })
    //     .catch(() => {});
    // },
    // //获取订单列表
    // getData() {
    //   this.load = true;
    //   this.ajaxs("active/activeOrder", {
    //     data: { active_id: this.active_id, state: this.activeName ,group_id : this.group_id , out_trade_no : this.out_trade_no},
    //     success: res => {
    //       this.list = res.msg.list;
    //       this.load = false;
    //       this.all = res.msg.all;
    //       this.no_verify = res.msg.no_verify;
    //       this.pay = res.msg.pay;
    //       this.success_order = res.msg.success_order;
    //       this.refuse_verify = res.msg.refuse_verify;
    //       this.return_order = res.msg.return_order;
    //       console.log(this.list);
    //     }
    //   });
    // },
    // //分页
    // changePage(e) {
    //   this.list.current_page = e;
    //   this.getData();
    // },
    // //切换tab
    // handleClick() {
    //   this.list.current_page = 1;
    //   this.getData();
    // }
  }
};
</script>

<style>
.ac-order-no {
  width: 100%;
  margin-bottom: 10px;
  font-weight: bold;
}
.ac-order-cover {
  width: 160px;
  height: 90px;
  border-radius: 5px;
}
.ac-order-info {
  display: inline-block;
  width: calc(100% - 180px);
  height: 90px;
  margin-left: 20px;
  background: #f8f8f8;
  float: right;
}
.ac-order-head {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  border-radius: 50%;
}
</style>